<template>
  <div>
    <!-- 上面部分 -->
    <el-card style="margin:20px">
      <el-form :model="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单编号：" label-width="100px" prop="id">
              <el-input v-model="form.id" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运单编号：" label-width="100px" prop="transportOrdersId">
              <el-input v-model="form.transportOrdersId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下单时间：" label-width="100px" prop="created">
              <el-input v-model="form.createdTime" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态:" label-width="100px" prop="">
              <el-input v-model="form.createStatus" />
            </el-form-item>
          </el-col>

          <el-form-item label="预计到达时间：" prop="estimatedArrivalTime" label-width="120px">
            <el-input v-model="form.estimatedArrivalTime" />
          </el-form-item>
        </el-row>
      </el-form>

    </el-card>

    <!-- 基本信息 -->
    <el-collapse v-model="activeNames1" style="margin:20px">
      <el-collapse-item title="基本信息" name="1">
        <div>
          <el-timeline style="margin-top:30px">
            <el-timeline-item v-for="item in aaa" :key="item.id">
              <!-- <img src="./images/p1.png" alt=""> -->
              {{ item }}

              <el-form :model="form">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="发货方姓名:" label-width="100px" prop="senderName">
                      <el-input v-model="form.senderName" />

                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="发货方电话:" label-width="100px">
                      <el-input v-model="form.senderPhone" />

                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="发货方地址:" label-width="100px">
                      <el-input v-model="form.senderAddress" />

                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="详细地址:" label-width="100px">
                      <el-input v-model="form.senderFullAddress" />

                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

            </el-timeline-item>

            <el-timeline-item v-for="item in bbb" :key="item.id">
              <!-- <img src="./images/p2.png" alt=""> -->
              {{ item }}
              <el-form :model="form">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="收获方姓名：" label-width="100px">
                      <el-input v-model="form.receiverName" />

                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="收获方电话：" label-width="100px">
                      <el-input v-model="form.receiverPhone" />

                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="8">
                    <el-form-item label="收获方地址：" label-width="100px">
                      <el-input v-model="form.receiverAdress" />

                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="详细地址：" label-width="100px">
                      <el-input v-model="form.receiverFullAddress" />

                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

            </el-timeline-item>
          </el-timeline>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 运输信息 -->
    <el-collapse v-model="activeNames2" style="margin:20px">
      <el-collapse-item name="2" title="运输信息">
        <el-steps :space="200" :active="3" finish-status="finish">
          <el-step
            title="皇姑区营业部"
            icon="el-icon-circle-check"
            description="111"
          >
            <div>111</div>
          </el-step>
          <el-step title="沈阳分拣中心" icon="el-icon-circle-check" />
          <el-step title="武藏营业部" icon="el-icon-circle-check" />
        </el-steps>
      </el-collapse-item></el-collapse>

    <!-- 货品信息 -->
    <el-collapse v-model="activeNames3" style="margin:20px">
      <el-collapse-item name="3" title="货品信息">
        <el-table border="" style="margin:20px">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column label="货品信息" width="120" />
          <el-table-column label="货品类型" width="120" />
          <el-table-column label="重量(千克)" width="120" />
          <el-table-column label="体积(立方)" width="120" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getdetail } from '@/api/modules/scheduling/transportationTask'

export default {
  data() {
    return {
      // 下拉列表默认展开
      activeNames1: ['1'],
      activeNames2: ['2'],
      activeNames3: ['3'],
      // timeline
      aaa: ['发货方'],
      bbb: ['收货方'],
      // 路由id
      userId: this.$route.params.id,
      form: {
        id: '',
        transportOrdersId: '', // 订单编号
        createdTime: '', // 下单时间
        createStatus: '', // 订单状态
        estimatedArrivalTime: '', // 预计到达时间
        senderName: '', // 发货人姓名
        senderPhone: '', // 发货人电话
        senderFullAddress: '', // 发货人省市区
        address: '', // 发货人详细地址
        receiverName: '', // 收货人姓名
        receiverPhone: '', // 收货人电话
        receiverAdress: '', // 收货人地址
        receiverFullAddress: '' // 收货人详细地址
      }
    }
  },
  async created() {
    console.log(this.userId)
    const res = await getdetail(this.userId)
    console.log(111, res.data)
    this.form = res.data
    // 订单编号
    this.form.transportOrdersId ? this.form.transportOrders[0].id : '无'
    // 下单时间
    this.form.createdTime = this.form.createdTime ? this.form.transportOrders[0].created : '无'
    // 预计到达时间
    this.form.estimatedArrivalTime = this.form.transportOrders[0].order.estimatedArrivalTime
    // 发货人姓名
    this.form.senderName = this.form.transportOrders[0].order.senderName
    // 发货人电话
    this.form.senderPhone = this.form.transportOrders[0].order.senderPhone
    // 发货人地区  省 市 区
    this.form.senderAddress = this.form.transportOrders[0].order.senderProvince.name + this.form.transportOrders[0].order.senderCity.name + this.form.transportOrders[0].order.senderCounty.name
    // 发货方详细地址
    this.form.senderFullAddress = this.form.transportOrders[0].order.senderAddress
    // 收货人姓名
    this.form.receiverName = this.form.transportOrders[0].order.receiverName
    // 收货人电话
    this.form.receiverPhone = this.form.transportOrders[0].order.receiverPhone
    // 收货人地址
    this.form.receiverAdress = this.form.transportOrders[0].order.receiverProvince.name + this.form.transportOrders[0].order.receiverCity.name + this.form.transportOrders[0].order.receiverCounty.name
    // 收货人详细地址
    this.form.receiverFullAddress = this.form.transportOrders[0].order.receiverAddress
  }
}
</script>

<style scoped>

</style>

<style lang="scss">
body{
  background-color: #f3f5f9;
}
.el-input__inner{
     background-color: #fff !important;
    border: none;
    height: 20px;
    color: #818693;
}

.el-collapse-item__header {
    height: 60px;
    background-color: #f8faff;
    padding: 20px 20px 20px 44px;
}
.el-table__header-wrapper{
  background-color: #f8faff;
}
</style>
